<template>
  <div
    class="homemain"
    v-loading.fullscreen.lock="fullscreenLoading"
    :element-loading-text="loadingtext"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <!-- 场景 -->
    <Seen ref="seen" @loadingfn="loadingfn" @loadingtextfn="loadingtextfn" />
    <!-- 背景 -->
    <!-- 右侧头部功能菜单 -->
    <HeadMent ref="headtips" @bfwc="bfwc" />
    <!-- 提示 -->
    <MinTips :mintiptext="mintiptext" v-if="mintiptext != ''" />
    <!-- 左侧功能菜单 -->
    <div class="taskbox">
      <!--  -->
      <!-- 背景栏目 -->
      <img src="@/images/taskboxbjs.png" alt="" class="taskbj" />
      <!-- setp -->
      <img src="@/images/STEP.png" alt="" class="step" />
      <!-- 主题内容 -->
      <div class="taskitembox">
        <div
          class="taskitem tool"
          v-for="item in taskdata"
          :key="item.id"
          @click="taskid = item.id"
        >
          <!-- 背景 -->
          <img
            src="@/images/taskitem.png"
            alt=""
            class="taskitembj normal"
            v-show="taskid != item.id"
          />
          <!-- 选中背景 -->
          <img
            src="@/images/taskitemac.png"
            alt=""
            class="taskitembj active"
            v-show="taskid != item.id"
          />
          <!-- 选中 -->
          <img
            src="@/images/taskitemac.png"
            alt=""
            class="taskitembj"
            v-show="taskid == item.id"
          />
          <div class="taskitemname">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <!-- 工作前准备选择题 -->
    <div class="gzqchoicebox" v-if="taskids == 1.1">
      <!-- 关闭按钮 -->
      <!-- 背景 -->
      <img src="@/images/gzchoicebj.png" alt="" class="gzchoicebj" />
      <!-- 题目类型 -->
      <img src="@/images/dxt.png" alt="" class="gzchoicetitle" />
      <!-- 题目标题 -->
      <div class="gzchoicename">
        <span> 请选择下列正确的扫描室温湿度（ ）。 </span>
      </div>
      <!-- 主题内容区域 -->
      <div class="gzchoicemain">
        <!-- ab -->
        <div class="gzchoiceiteitembox">
          <div class="gzchoiceiteitemmain" @click="answer = 'A'">
            <div class="gzchoiceicon">
              <!-- 背景 -->
              <img src="@/images/gzwx.png" alt="" class="gzwx" />
              <!-- 已选 -->
              <img
                src="@/images/gzwxac.png"
                alt=""
                class="gzwxac"
                v-show="answer == 'A'"
              />
            </div>
            <!-- 选项 -->
            <div class="gzchoiexz"><span>A.</span></div>
            <!--选项内容 -->
            <div
              class="gzchoicexzdes"
              :class="{ gzchoicexzdesac: answer == 'A' }"
            >
              <img src="@/images/18℃-35％.png" alt="" />
              <div class="gzchoiceitemname">18℃-35％</div>
            </div>
          </div>
          <div class="gzchoiceiteitemmain" @click="answer = 'B'">
            <div class="gzchoiceicon">
              <!-- 背景 -->
              <img src="@/images/gzwx.png" alt="" class="gzwx" />
              <!-- 已选 -->
              <img
                src="@/images/gzwxac.png"
                alt=""
                class="gzwxac"
                v-show="answer == 'B'"
              />
            </div>
            <!-- 选项 -->
            <div class="gzchoiexz"><span>B.</span></div>
            <!--选项内容 -->
            <div
              class="gzchoicexzdes"
              :class="{ gzchoicexzdesac: answer == 'B' }"
            >
              <img src="@/images/24℃-55％.png" alt="" />
              <div class="gzchoiceitemname">24℃-55％</div>
            </div>
          </div>
        </div>
        <!-- cd -->
        <div class="gzchoiceiteitembox">
          <div class="gzchoiceiteitemmain" @click="answer = 'C'">
            <div class="gzchoiceicon">
              <!-- 背景 -->
              <img src="@/images/gzwx.png" alt="" class="gzwx" />
              <!-- 已选 -->
              <img
                src="@/images/gzwxac.png"
                alt=""
                class="gzwxac"
                v-show="answer == 'C'"
              />
            </div>
            <!-- 选项 -->
            <div class="gzchoiexz"><span>C.</span></div>
            <!--选项内容 -->
            <div
              class="gzchoicexzdes"
              :class="{ gzchoicexzdesac: answer == 'C' }"
            >
              <img src="@/images/20℃-45％.png" alt="" />
              <div class="gzchoiceitemname">20℃-45％</div>
            </div>
          </div>
          <div class="gzchoiceiteitemmain" @click="answer = 'D'">
            <div class="gzchoiceicon">
              <!-- 背景 -->
              <img src="@/images/gzwx.png" alt="" class="gzwx" />
              <!-- 已选 -->
              <img
                src="@/images/gzwxac.png"
                alt=""
                class="gzwxac"
                v-show="answer == 'D'"
              />
            </div>
            <!-- 选项 -->
            <div class="gzchoiexz"><span>D.</span></div>
            <!--选项内容 -->
            <div
              class="gzchoicexzdes"
              :class="{ gzchoicexzdesac: answer == 'D' }"
            >
              <img src="@/images/16℃-70％.png" alt="" />
              <div class="gzchoiceitemname">16℃-70％</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 确定按钮区域 -->
      <div class="gzchoicebt">
        <!-- 按钮背景 -->
        <img src="@/images/anniu.png" class="gzchoicebtbj" />
        <!-- 按钮 -->
        <div class="gzchoicebtname" @click="gzyzawer">确 定</div>
      </div>
      <!--   -->
      <div class="xztzzbox" v-if="gzchoicetips != ''">
        <img src="@/images/xztzz.png" alt="" class="xztzzbj" />
        <div class="xztzzerr" v-if="errorshow">
          <span>正确答案：</span>温度20°、湿度45%。
        </div>
      </div>
      <!-- 提示 -->
      <div class="gzctipbox" v-if="gzchoicetips != ''">
        <img
          src="@/images/rightbj.png"
          alt=""
          class="rightbj"
          v-if="rightshow"
        />
        <img
          src="@/images/errorbj.png"
          alt=""
          class="rightbj"
          v-if="errorshow"
        />
        <div class="gzctipname">{{ gzchoicetips }}</div>
      </div>
    </div>
    <!-- 核对患者信息 -->
    <HzDh @taskfn="taskfn" v-if="taskids == 2" ref="hzdh1" @bfhzdh="bfhzdh" />
    <!-- 核对患者信息选择题前置 -->
    <img
      src="@/images/24℃-55％.png"
      alt=""
      class="hdhzqimg"
      v-if="taskids == 1"
      @click="taskids = 1.1"
    />
    <!-- 核对患者信息步骤完成 -->
    <!-- 控制室选择  v-if="taskids == 2.1"-->
    <div class="ksxbox" v-if="taskids == 2.1">
      <!-- 背景 -->
      <img src="@/images/kzbj.png" alt="" class="kzbj" />
      <!-- 选择 -->
      <div class="ksxmain">
        <div class="tool" @click="goksz(1)">
          <img src="@/images/kz1.png" alt="" class="normal" />
          <img src="@/images/kz1ac.png" alt="" class="active" />
        </div>
        <div class="tool" @click="goksz(2)">
          <img src="@/images/kz2.png" alt="" class="normal" />
          <img src="@/images/kz2ac.png" alt="" class="active" />
        </div>
        <div class="tool" @click="goksz(3)">
          <img src="@/images/kz3.png" alt="" class="normal" />
          <img src="@/images/kz3ac.png" alt="" class="active" />
        </div>
        <div class="tool" @click="goksz(4)">
          <img src="@/images/kz4.png" alt="" class="normal" />
          <img src="@/images/kz4ac.png" alt="" class="active" />
        </div>
      </div>

      <!-- 错误提示 -->
      <div class="kszcwbox" v-if="ksztipshow">
        <img src="@/images/kzscw.png" alt="" />
        <div class="ksztips">房间选择错误, 请重新选择</div>
      </div>
    </div>
    <!-- h -->
  </div>
</template>

<script>
import HeadMent from '@/components/headMent.vue'
import HzDh from '@/components/hzDh.vue'
import MinTips from '@/components/minTips.vue'
import Seen from '@/view/seen.vue'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { HeadMent, MinTips, HzDh, Seen },
  data() {
    //这里存放数据
    return {
      loadingtext: '测试',
      taskids: 1,
      taskid: 1,
      fullscreenLoading: false,
      taskdata: [
        {
          id: 1,
          name: '工作前准备'
        },
        {
          id: 2,
          name: '核对信息'
        },
        {
          id: 3,
          name: '患者更衣'
        },
        {
          id: 4,
          name: '信息输入'
        },
        {
          id: 5,
          name: '穿防护衣'
        },
        {
          id: 6,
          name: '患者摆位'
        },
        {
          id: 7,
          name: '调整机器'
        },
        {
          id: 8,
          name: '曝光出图'
        },
        {
          id: 9,
          name: '交代事项'
        },
        {
          id: 10,
          name: '图像浏览'
        }
      ],
      answer: 0,
      gzchoicetips: '',
      ksztipshow: false,
      mintiptext: '',
      rightshow: false
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    taskid: {
      handler(i) {
        console.log('当前数据', i)
        this.taskids = i
        if (this.$refs.headtips) {
          this.$refs.headtips.playAudioStop()
        }
        if (this.$refs.seen) {
          this.$refs.seen.stopall()
        }
        if (i == 1) {
          this.$nextTick(() => {
            console.log('执行了')

            this.mintiptext = '请点击温度计，查看温湿度'
            this.$refs.seen.move(
              [-2.318, 1.719, 1.902],
              [-33.79 / 180, -86.91 / 180, -33.75 / 180]
            )
          })
        }
      },
      deep: true,
      immediate: true
    },
    taskids: {
      handler(i) {
        this.mintiptext = ''
        this.ksztipshow = false
        if (i == 1) {
          this.$nextTick(() => {
            this.mintiptext = '请点击温度计，查看温湿度'
            this.$refs.seen.move(
              [-2.318, 1.719, 1.902],
              [-33.79 / 180, -86.91 / 180, -33.75 / 180]
            )
          })
        }
        if (i == 1.3) {
          this.mintiptext = '请点击电脑，进行球管预热'
          this.$refs.seen.move(
            [-12.452, 1.36, -5.464],
            [-23.43 / 180, 88.44 / 180, 23.42 / 180]
          )
          this.$refs.seen.twinklePoint(-14.513, 1.559, -5.942)
        }
        if (i == 2) {
          this.$refs.seen.move(
            [-5.039, 1.655, 16.099],
            [-67.8 / 180, 79.18 / 180, 67.43 / 180]
          )
        }
        if (i == 3) {
          this.$refs.seen.move(
            [10.021, 1.483, 10.417],
            [-99.35 / 180, 75.79 / 180, 99.64 / 180]
          )
        }
        if (i == 3.1) {
          this.mintiptext = '请将患者身上影响本次扫描的金属物品摘除'
        }
        if (i == 3.2) {
          this.mintiptext = '请点击衣物更换'
        }
        if (i == 4) {
          this.mintiptext = '点击电脑，输入患者信息'
          this.$refs.seen.move(
            [-11.977, 1.486, -5.471],
            [-74.54 / 180, 85.26 / 180, 74.49 / 180]
          )
        }
        if (i == 4.1) {
          this.mintiptext = '将患者信息输入并确认'
        }
        if (i == 5) {
          this.mintiptext = '请选择当前扫描部位不能使用的防护服'
        }
        if (i == 6) {
          this.mintiptext = ''
        }
        //
      },
      deep: true,
      immediate: true
    }
  },
  //方法集合
  methods: {
    loadingtextfn(i) {
      this.loadingtext = i
    },
    loadingfn(flag) {
      this.fullscreenLoading = flag
    },
    // 播放完成
    bfwc(src) {
      this.$refs.hzdh1.showNextMessage()
      console.log(src)
    },
    // 播放患者录音
    bfhzdh(item) {
      this.$refs.headtips.playAudio(item.raido)
      if (item.role == 'user1') {
        //医生
        this.$refs.seen.playAction('1yisheng', '1yisheng')
      } else {
        //患者
        this.$refs.seen.playAction('2huanzhe', '2huanzhe')
      }
    },
    goksz(i) {
      if (this.taskids == 2.1) {
        if (i == 2) {
          console.log('正确')
          this.taskid = 3
        } else {
          this.ksztipshow = true
          const timer = setTimeout(() => {
            this.ksztipshow = false
            clearTimeout(timer)
          }, 1000)
        }
      }
    },
    taskfn(id) {
      this.taskids = id
    },
    gzyzawer() {
      if (this.answer == 'C') {
        this.rightshow = true
        this.gzchoicetips = '回答正确'
        this.taskids = 1.3
      } else {
        this.errorshow = true
        this.gzchoicetips = '回答错误'
      }
      const timer = setTimeout(() => {
        this.rightshow = false
        this.errorshow = false
        this.gzchoicetips = ''
        clearTimeout(timer)
      }, 2000)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.homemain {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}
.taskbox {
  width: 253px;
  height: 675px;
  position: absolute;
  left: 17px;
  top: 135px;
}
.taskbj {
  width: 253px;
  height: 675px;
}
.step {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 117px;
  height: 41px;
}
.taskitembox {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 50px;
  padding-left: 3px;
}

.taskitem {
  margin: 5px 0;
  cursor: pointer;
  width: 236px; /* 固定宽度，与子元素一致 */
  height: 38px; /* 固定高度，与子元素一致 */
  position: relative; /* 父容器相对定位，子元素绝对定位生效 */
}

.taskitembj {
  width: 100%; /* 改为 100%，与父容器宽度同步 */
  height: 100%; /* 改为 100%，与父容器高度同步 */
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

/* 最终的垂直居中样式（Flex 方案） */
.taskitemname {
  height: 100%; /* 与父容器高度一致，简化写法 */
  width: 100%; /* 与父容器宽度一致 */
  display: flex;
  align-items: center; /* 垂直居中核心 */
  /* font-weight: bold; */
  font-size: 22px;
  color: #ffffff;
  position: absolute;
  top: 0px;
  left: 0;
  box-sizing: border-box;
  padding-left: 38px;
  background-color: transparent;
}
.gzqchoicebox {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.gzchoicebj {
  width: 539px;
  height: 566px;
  position: relative;
  top: 0;
}
.gzchoicetitle {
  width: 72px;
  height: 18px;
  position: absolute;
  top: 17px;
  left: 29px;
}
.gzchoicename {
  position: absolute;
  top: 45px;
  left: 8px;
  height: 41px;
  width: 525px;
  font-weight: 500;
  font-size: 21px;
  color: #ffe8c2;
  padding-left: 30px;
  display: flex;
  align-items: center;
  /* 只保留上下边框，去掉左右边框 */
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: none;
  border-right: none;

  /* 使用从左到右的渐变（#efc279到透明） */
  border-image: linear-gradient(90deg, #efc279 0%, rgba(239, 194, 121, 0) 100%)
    1;
  /* 切片设置为上下显示，左右不显示 */
  border-image-slice: 1 0 1 0;
}
.gzchoicename span {
  margin-top: -1px;
}
.gzchoicemain {
  width: 475px;
  height: 385px;
  position: absolute;
  top: 105px;
  left: 27px;
  display: flex;
  flex-direction: column;

  justify-content: space-around;
}
.gzchoiceiteitembox {
  display: flex;
  cursor: pointer;
  justify-content: space-around;
}
.gzchoiceiteitemmain {
  display: flex;
}

.gzchoiceicon {
  position: relative;
}
.gzwx {
  width: 17px;
  height: 17px;
  position: absolute;
  left: -20px;
  top: -1px;
}
.gzwxac {
  width: 19px;
  height: 13px;
  position: absolute;
  left: -18px;
  top: 0px;
}
.gzchoiexz {
  font-weight: 500;
  font-size: 18px;
  color: #ffe8c2;
  margin: 0px 6px;
}
.gzchoiexz span {
  display: block;
  margin-top: -5px;
}
.gzchoicexzdes {
  width: 181px;
  height: 181px;
  background: #3a3d4e;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gzchoicexzdes img {
  width: 135px;
  height: 135px;
}
.gzchoiceitemname {
  font-size: 19px;
  color: #ffe8c2;
}
.gzchoicebt {
  position: absolute;
  left: 50%;
  bottom: 25px;
  transform: translate(-50%, 0);
  cursor: pointer;
  width: 112px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gzchoicebtbj {
  width: 112px;
  height: 44px;
  position: relative;
}
.gzchoicebtname {
  font-weight: 500;
  font-size: 21px;
  color: #ffe8c2;
  position: absolute;
}
.gzchoicexzdesac {
  border: 2px solid #00f2c7;
}
.gzctipbox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.rightbj {
  width: 259px;
  height: 114px;
  position: relative;
}
.gzctipname {
  font-weight: 500;
  font-size: 19px;
  color: #ffffff;
  position: absolute;
  top: 0;
  left: 95px;

  width: 114px;
  height: 114px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ksxbox {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
}
.kzbj {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.ksxmain {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0px 380px;
  justify-content: space-around;
}
.ksxmain img {
  width: 274px;
  height: 386px;
}
.kszcwbox {
  width: 1380px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffe8c2;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.kszcwbox img {
  width: 1380px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
}
.ksztips {
  position: relative;
}
.xztzzbox {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 532px;
  height: 559px;
  display: flex;

  justify-content: center;
}
.xztzzbj {
  position: absolute;
  width: 532px;
  height: 559px;
}
.xztzzerr {
  position: absolute;
  font-size: 18px;
  color: #ffffff;
  bottom: 151px;
}
.xztzzerr span {
  font-size: 14px;
}
.hdhzqimg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 135px;
  height: 136px;
  border: 5px solid red;
  border-radius: 50%;
  cursor: pointer;
}
</style>
